<template>

	<view class="container-wrapper">
		<navigation-custom :config="config" :wrapperStyle="{
					height: 530,
					backgroundImg: huatiInfo.src
				}" :scrollTop="scrollTop" @customConduct="customConduct"
		 :scrollMaxHeight="scrollMaxHeight" />
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabTab" />
		<view class="content">
			<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
			<view class="amount">
				共上传 {{tabIndex ? newstWorkList.amount : hotWorkInfo.amount}} 个作品
			</view>
			<swiper class="swiper-box" :style="getHeight" :current="tabIndex" @change="tabChange">
				<swiper-item>
					<item-list-temple @refresh="refresh" :scrollClass="['workList','u-f']" :scrollStyle="getHeight" :itemList="hotWorkInfo.list"
					 :selfLoadtext="hotWorkInfo.loadtext">
						<!-- 图文列表 -->
						<block :key="work.work_id" v-for="work in hotWorkInfo.list">
							<work-item :itemInfo="work" @changeLike="changeLike" />
						</block>
					</item-list-temple>

				</swiper-item>
				<swiper-item>


					<item-list-temple :scrollClass="['workList','u-f']" :scrollStyle="getHeight" :itemList="newstWorkList.list"
					 :selfLoadtext="newstWorkList.loadtext">
						<!-- 图文列表 -->
						<block :key="work.work_id" v-for="work in newstWorkList.list">
							<work-item :itemInfo="work" @changeLike="changeLike" />
						</block>
					</item-list-temple>

				</swiper-item>
			</swiper>

		</view>
		<view class="ft u-f-ac  u-f-jsb">
			<view class="join u-f-ajc" @tap="goPublish()">
				<image :src="static('join')" mode="widthFix" /><text>我要参与</text>
			</view>
			<view @tap="openShare()" class="share">
				<text class="icon iconfont iconfenxiang"></text>分享
			</view>
		</view>
		<share ref="share" :poster="huatiInfo" />

	</view>
</template>

<script>
	import itemListTemple from '@/components/common/item-list-temple.vue';
	import swiperTabHead from '../../../components/huati/swiper-tab-head';
	import workItem from '../../../components/huati/work-item';
	import share from "@/components/common/share.vue";
	import navigationCustom from "@/components/common/navigation-custom.vue";
	import mapper from "@/mapper/work/huati_detail.js";
	import workMapper from "@/mapper/work/work.js";
	export default {
		components: {
			swiperTabHead,
			workItem,
			share,
			navigationCustom,
			itemListTemple
		},
		computed: {
			// 内容區高度
			getHeight() {

				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(530 + 101 + 54 + 98 + 50)
				return `height: ${height}px;`;

			}
		},
		data() {
			return {
				topic_id: 0,
				// 自定义导航栏
				config: {
					title: "画友星球", //title
					bgcolor: "#c1a379", //背景颜色
					fontcolor: "#FFF", //文字颜色，默认白色
					type: 2, //type 1，3胶囊 2，4无胶囊模式
					transparent: true, //是否背景透明 默认白色
					linear: true, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/icon/back_.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字,

				},
				scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200, //滑动的高度限制，超过这个高度即背景全部显示
				// 話題詳情信息
				huatiInfo: {
					src: '',
					huati: '画个女朋友吧',
					desc: '',
					limit: 12
				},
				hotWorkInfo: // 最热
				{
					loadtext: 'loading..',
					amount: 1346,
					page: 1,
					list: []
				},
				newstWorkList: // 最新
				{
					loadtext: 'loading..',
					amount: 1346,
					page: 1,
					list: []
				},
				// tab信息
				tabIndex: 0,
				tabBars: [{
					name: '最热',
					id: '0',
					num: ''
				}, {
					name: '最新',
					id: '1',
					num: ''
				}]
			}
		},

		onLoad(option) {
			this.topic_id = option.index || 1
		},
		mounted() {
			let that = this
			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			this.initData();
			
			mapper.getHuatiDetail(this.topic_id).then(data => {
				this.huatiInfo.desc = data.data.description;
				this.huatiInfo.src = data.data.image.url;
				this.huatiInfo.huati = data.data.title;
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 分享
		onShareAppMessage(res) {
			this.closeShare()
			return {
				title: this.huatiInfo.name,
				path: '/pages/huati/huati_detail/huati_detail'
			}
		},
		methods: {
			async getList(flag) {
				let workData = {};
				let {
					topic_id,
					hotWorkInfo,
					huatiInfo,
					newstWorkList
				} = this;
				if (flag) {
					workData = await mapper.getHotWorks(topic_id, newstWorkList.page, huatiInfo.limit);
					newstWorkList.amount = workData.pagination.total
					newstWorkList.list.push(...workData.data);
					if (!workData.data.length) {
						newstWorkList.loadtext = '沒有更多了';
					} else {
						newstWorkList.loadtext = 'loading..'
					}
				} else {
					workData = await mapper.getNewestWorks(topic_id, hotWorkInfo.page, huatiInfo.limit);
					hotWorkInfo.amount = workData.pagination.total;
					hotWorkInfo.list.push(...workData.data);
					console.log(workData,hotWorkInfo.list)
					if (!workData.data.length) {
						hotWorkInfo.loadtext = '沒有更多了';
					} else {
						hotWorkInfo.loadtext = 'loading..'
					}
				}
				uni.hideLoading()

			},
			refresh(opt) {
				if (opt == "loadmore") {
					let target = 'newstWorkList'
					if (!this.tabIndex) {
						target = 'hotWorkInfo'
					}
					// 修改状态
					this[target].loadtext = "loading..";
					this[target].page++;
					this.getList(this.tabIndex);
				} else {
					this.initData()
				}
			},
			async initData(obj) {
				this.hotWorkInfo = // 最热
					{
						loadtext: 'loading..',
						amount: 1346,
						page: 1,
						list: []
					};
				this.newstWorkList = // 最新
					{
						loadtext: 'loading..',
						amount: 1346,
						page: 1,
						list: []
					};
				this.getList(0);
				this.getList(1);

			},
			tabTab(index) {
				this.tabIndex = index;
			},
			// 滑动事件
			tabChange(e) {
				this.tabIndex = e.detail.current;
			},
			changeLike(workIndex) {
				let target = 'newstWorkList'
				if (!this.tabIndex) {
					target = 'hotWorkInfo'
				}
				this[target].list.map((item, i) => {
					if (item['work_id'] === workIndex) {
						item['i_like'] = !item['i_like'];
						this.$set(this[target].list, i, item);
							commenMapper.like(workIndex,item['i_like'])
						

					}
				})
			},
			
			goPublish() {
				uni.navigateTo({
					url: `work/add_work/add_work`,
					fail(err) {
						console.log(err)
					}
				})
			},
			openShare() {
				this.$refs.share.open()
			},
			closeShare() {
				this.$refs.share.close()
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow-y: hidden;
	}

	.nav-wrapper {
		background-size: cover;
	}

	.amount {
		font-size: 28upx;
		font-weight: 400;
		color: rgba(140, 140, 140, 1);
		line-height: 1;
		margin-bottom: 22upx;
	}

	.content {
		padding: 13upx 28upx 41upx;
		background: rgba(247, 247, 247, 1);
		position: relative;
		overflow: hidden;

		.workList {
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	.work-item {
		margin-bottom: 30upx;
	}

	work-item {
		display: inline-flex;
	}

	work-item:nth-child(2n+1) {
		margin-right: 16upx;
	}

	.ft {
		padding-right: 78upx;
		padding-left: 32upx;
		color: #fff;
		height: 98upx;

		.join {
			line-height: 75upx;
			text-align: center;
			width: 450upx;
			background-color: $a1;
			border-radius: 36upx;

			>image {
				width: 28upx;
				height: 28upx;
				margin-right: 10upx;
			}
		}

		.share {
			color: #B3B3B3;
			font-size: 28upx;

			.icon {
				margin-right: 6upx;
			}
		}
	}
</style>
